<template>
    <el-aside width="200px" class="home-aside">
        <el-scrollbar>
            <el-menu :default-openeds="['2']" :router="true">
                <template v-for="(item, index) in menus" :key="item.to">
                    <!-- 菜单下面没有子类，不可展开 el-menu-item -->
                    <el-menu-item v-if="item.children.length === 0" :index="index + 1 + ''" :route="{ path: item.to }">
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                    <!-- 菜单下面有子类，可以展开 el-sub-menu -->
                    <el-sub-menu v-else :index="index + 1 + ''">
                        <template #title>{{ item.title }}</template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(chItem, chIndex) in item.children" :key="chItem.to"
                                :index="`${index + 1}-${chIndex + 1}`" :route="{ path: chItem.to }">{{ chItem.title
                                }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>
  
<script setup lang="ts">
import { menus } from "@/Hooks/Filter";

</script>
  
<style lang="scss" scoped>
.home-aside {
    border-right: 1px solid #2323;
    color: var(--el-text-color-primary);

    .el-menu {
        border-right: none;
    }
}
</style>
  